<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户信息修改</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body style="background-color: #ffaa7f;">
<div id="app">
    <fieldset style="margin-top: 100px; border-radius: 10px; border-color: #5555FF;">
        <legend style="text-align: center; color:#5555FF;">修改个人信息</legend>
        <div class="form-group">
            <label>姓名*:</label>
            <input type="text" v-model="insuranceNName" @focus="nameFocus()" @blur="nameCheck()"/>
            <span class="msg" v-if="msgFlg.nameFlg">{{nameList[msgFlg.nameinfo]}}</span>
        </div>
        <div class="form-group">
            <label>银行卡号*:</label>
            <input type="text" v-model="bankAAccount" @focus="bankaccountFocus()" @blur="bankaccountCheck()"/>
            <span class="msg" v-if="msgFlg.bankaccountFlg">{{bankaccountList[msgFlg.bankaccountinfo]}}</span>
        </div>
        <div class="form-group">
            <label>手机号*</label>
            <input type="text" v-model="ttel" @focus="telFocus()" @blur="telCheck()"/>
            <span class="msg" v-if="msgFlg.telFlg">{{telList[msgFlg.telinfo]}}</span>
        </div>
        <div class="form-group">
            <label></label>
            <button @click="save()">保存更新</button>
            <button onclick="location.replace('userMenu.html');">返回上一页</button>
        </div>
    </fieldset>
</div>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/message.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            "accountIId": "",
            "insuranceNName": "",
            "bankAAccount": "",
            "ttel": "",
            "msgFlg": {
                "nameFlg": false,
                "nameinfo": 0,
                "bankaccountFlg": false,
                "bankaccountinfo": 0,
                "telFlg": false,
                "telinfo": 0
            },
            "nameList": ["请输入姓名", "输入中包含特殊字符", "输入中包含数字","姓名长度过长"],
            "bankaccountList": ["请输入银行卡号", "输入中包含字符", "长度过短", "长度过长"],
            "telList": ["请输入手机号", "输入中包含字符", "长度过短应为11位", "长度过长应为11位"]
        },

        methods: {
            save: function () {
                this.nameCheck();
                this.bankaccountCheck();
                this.telCheck();
                if (this.msgFlg.nameFlg == false && this.msgFlg.bankaccountFlg == false && this.msgFlg.telFlg == false) {
                    axios.post("http://localhost:8000/bracelet/release/api/user/update",
                        {
                            "accountId": this.accountIId,
                            "insuranceName": this.insuranceNName,
                            "bankAccount": this.bankAAccount,
                            "tel": this.ttel
                        })
                        .then(res => {
                            if (res.data.result) {
                                // 更新成功
                                alert("已更新!");
                                setTimeout("location.replace('userUpdate.html')", 3000);
                            } else {
                                alert("更新失败!");
                            }
                        })
                        .catch(error => {
                            alert("更新失败!");
                        });
                }
            },

            nameCheck: function () {
                var reg1 = /[^0-9a-zA-Z\b\u4e00-\u9fa5]/;
                var reg2 = /[^a-zA-Z\b\u4e00-\u9fa5]/;
                var reg3 = /^[a-zA-Z\b\u4e00-\u9fa5]{30,100}$/;
                if (this.insuranceNName == null || this.insuranceNName == "") {
                    this.msgFlg.nameFlg = true;
                    this.msgFlg.nameinfo = 0;
                } else if (reg1.test(this.insuranceNName)) {
                    this.msgFlg.nameFlg = true;
                    this.msgFlg.nameinfo = 1;
                } else if (reg2.test(this.insuranceNName)) {
                    this.msgFlg.nameFlg = true;
                    this.msgFlg.nameinfo = 2;
                } else if (reg3.test(this.insuranceNName)) {
                    this.msgFlg.nameFlg = true;
                    this.msgFlg.nameinfo = 3;
                } else {
                    this.msgFlg.nameFlg = false;
                }
            },
            bankaccountCheck: function () {
                var reg1 = /[^0-9]/;
                var reg2 = /^\d{1,14}$/;
                var reg3 = /^\d{20,100}$/;
                if (this.bankAAccount == null || this.bankAAccount == "") {
                    this.msgFlg.bankaccountFlg = true;
                    this.msgFlg.bankaccountinfo = 0;
                } else if (reg1.test(this.bankAAccount)) {
                    this.msgFlg.bankaccountFlg = true;
                    this.msgFlg.bankaccountinfo = 1;
                } else if (reg2.test(this.bankAAccount)) {
                    this.msgFlg.bankaccountFlg = true;
                    this.msgFlg.bankaccountinfo = 2;
                } else if (reg3.test(this.bankAAccount)) {
                    this.msgFlg.bankaccountFlg = true;
                    this.msgFlg.bankaccountinfo = 3;
                } else {
                    this.msgFlg.bankaccountFlg = false;
                }
            },
            telCheck: function () {
                var reg1 = /[^0-9]$/;
                var reg2 = /^\d{1,10}$/;
                var reg3 = /^\d{12,100}$/;
                if (this.ttel == null || this.ttel == "") {
                    this.msgFlg.telFlg = true;
                    this.msgFlg.telinfo = 0;
                } else if (reg1.test(this.ttel)) {
                    this.msgFlg.telFlg = true;
                    this.msgFlg.telinfo = 1;
                } else if (reg2.test(this.ttel)) {
                    this.msgFlg.telFlg = true;
                    this.msgFlg.telinfo = 2;
                } else if (reg3.test(this.ttel)) {
                    this.msgFlg.telFlg = true;
                    this.msgFlg.telinfo = 3;
                } else {
                    this.msgFlg.telFlg = false;
                }
            },

            nameFocus: function () {
                this.msgFlg.nameFlg = false;
            },
            bankaccountFocus: function () {
                this.msgFlg.bankaccountFlg = false;
            },
            telFocus: function () {
                this.msgFlg.telFlg = false;
            }
        },

        created: function () {

            axios.post("http://localhost:8000/bracelet/release/api/user/findbyid",
                {
                    "token": sessionStorage.getItem("authtoken")
                }
            )
                .then(res => {
                    this.accountIId = res.data.result.accountId;
                    this.insuranceNName = res.data.result.insurance_name;
                    this.bankAAccount = res.data.result.bank_account;
                    this.ttel = res.data.result.tel;
                })
                .catch(error => {
                    alert("页面加载失败!\n请从个人页面重新进入!");
                });
        }
    })
</script>
</body>
</html>